<template>
  <div class="body vertical center ">
    <div class="sm_top">
      <div ref="refDom" :class="`item_list ${curWay._payname === item._payname ? 'active' : ''}`"
        v-for="(item, index) in legalRecharge" :key="index" @click="chooseWay(item)">
        {{ t(`api_${item._payname}`) }}
      </div>
    </div>
    <div class="sm_content">
      <swiper
          direction="horizontal"
          :autoplay="false"
          :autoHeight="true"
          :loop="false"
          :disableOnIntercation="false"
          :touchStartPreventDefault="false"
          slidesPerView="auto"
          :space-between="5"
          :centeredSlides="true"
          class="search_page_swiper"
          @swiper="onSwiperInit"
          @slideChange="handleSwiperChange"
          >
          <swiper-slide v-for="(item, index) in legalRecharge" :key="index">
            <img :src="`/imgs/payment/sm/${lang}/deposit/sm_${item._payname}.webp`" />
          </swiper-slide>
      </swiper>
    </div>    
  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { ref, watch } from 'vue';
import { Local } from "@/utils/storage";
import { storeToRefs } from "pinia";
import { Page } from "@/store/page.ts";
import pinia from "@/store";
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const { t } = useI18n();
const { lang } = storeToRefs(Page(pinia));
const curWay = ref(Local.get('curExplainWay') || { _payname: '' });
const legalRecharge = ref<any>(Local.get('depositWayObj')?.legalRecharge || []);

// 选择充值方式
const chooseWay = (data: any, slider = true) => {
  Local.set('curExplainWay', data);
  curWay.value = data;
  if (slider) {
    // @ts-ignore
    swiperInstance.value.slideTo(legalRecharge.value.findIndex((a: any) => a.payname == data.payname));
  }
}

const swiperInstance = ref(null);
const onSwiperInit = (swiper: any) => {
	swiperInstance.value = swiper; // 保存 Swiper 实例
};

const handleSwiperChange = (swiper: any) => {
  chooseWay(legalRecharge.value[swiper.realIndex], false);
}

const refDom: any = ref([])
watch(() => curWay.value._payname, (val: any) => {
  const i: any = legalRecharge.value.findIndex((a: any) => a._payname == val)
  setTimeout(() => {
    if (refDom.value[i]) {
      refDom.value[i].scrollIntoView({
        behavior: 'smooth',
        block: 'center', // 滚动到屏幕中间
        inline: 'center', // 横向居中
      });
    }
  }, 300)

}, { immediate: true })
</script>

<style lang='scss' scoped>
.body {
  height: calc(var(--vh) * 100  - 44px - env(safe-area-inset-top));
  overflow: hidden;
  color: #93b4ff;
  font-size: 14px;

  .sm_top {
    padding: 16px 0 14px 14px;
    display: flex;
    overflow-x: auto;

    .item_list {
      text-align: center;
      position: relative;
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      //min-width: 80px;
      height: 44px;
      line-height: 15px;
      //padding: 10px;
      color: #C6C4F5;

      &:nth-child(n+2) {
        margin-left: 14px;
      }
      &.active {
        color: #5B6CFF;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(180deg, #5B6CFF 0%, #9E1EFF 100%);
        }
      }

    }
  }

  .sm_content {
    padding: 0 14px 41px 14px;
    height: calc(var(--vh) * 100 - 74px);
    // border: 1px solid #f00;
    overflow-y: auto;

    img {
      width: 100%;
    }
  }
}
</style>